<template>
  <div class="newsDetails">
    <Header :fixed="true">
      <van-icon name="arrow-left" slot="left" />
      <div slot="title">文献详情</div>
      <van-icon name="like" slot="right" @click.native="getInsert" :style="{'color': data.isCollection == 'true' ? '#d0393f': ''}" />
    </Header>
    <div class="newsDetails-box">
        <div class="tit">{{ data.title }}</div>
        <div class="content" v-html="data.content"></div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header'
import { getDocumentationDetail, insert, remove } from '@/api/home'
export default {
  name: 'newsDetails',
  data () {
    return {
      data: {}
    }
  },
  components: {
    Header
  },
  mounted () {
    
  },
  watch: {
    
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      let { data } = await getDocumentationDetail({userId: this.$store.state.user.userId, id: this.$route.query.id})
      if (data.result == 'suc') {
        this.data = data.data
      }
    },
    async getInsert () {
      if (this.data.isCollection == 'false') {
        let { data } = await insert({userId: this.$store.state.user.userId, type: '6', contentId: this.data.id})
        if (data.result == 'suc') {
            this.$toast('收藏成功！');
            this.getData()
        } 
      } else {
        let { data } = await remove({userId: this.$store.state.user.userId, id: this.data.id})
        if (data.result == 'suc') {
            this.$toast('已取消收藏！');
            this.getData()
        } 
      }
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/css/index.less';
.newsDetails {
  min-height: 100vh;
}
.newsDetails-box {
  padding-top: 70px;
  .tit {
    padding: 12px 0 16px 0;
    font-size: @big-size;
    font-weight: 600;
    text-align: center;
  }
  .content {
    font-size: @normal-size;
    padding: 0 16px;
    img {
      width: 100% !important;
      height: auto !important;
    }
  }
}
</style>